<template>
  <van-dropdown-menu>
    <van-dropdown-item title="类别" v-model="state.type" :options="types" @change="onLoad"/>
    <van-dropdown-item title="筛选">
      <van-cell title="选择单个日期" :value="state.createDate" @click="state.showCalendar = true" />
      <van-calendar v-model:show="state.showCalendar" :show-confirm="false" @confirm="changeCalendar" />
    </van-dropdown-item>
  </van-dropdown-menu>

  <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in state.recordList" :key="item.id" :value="item.createDate" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span>{{item.examName}}</span>
          <van-tag type="danger">{{ item.examType ==="CHAPTER" ? '章节测试' :item.examType ==="SIMULATION" ? '模拟考试' : item.examType ==="ASSEMBLE" ? '组卷练习' : "每日一练" }}</van-tag>
        </template>
      </van-cell>
    </van-list>
  </van-pull-refresh>

  <van-empty v-if="state.recordList.length ===0" description="暂无数据" />
</template>

<script>
import { reactive,ref } from "vue"
import { examRecord } from "@/api/exam";
import { Toast } from "vant"
export default {
  name: "exam-record",
  setup(){
    const types = ref([
      { text: '章节测试', value: 0 }
    ]);
    const state = reactive({
      showCalendar: false,
      loading: false,
      finished: false,
      refreshing: false,

      type: 0,
      createDate: '',
      recordList: [],
    });

    const onLoad=()=>{
      setTimeout(() => {
        if (state.refreshing) {
          state.list = [];
          state.refreshing = false;
        }
        examRecord({params: {type: state.type,createDate: state.createDate}}).then(({data: res})=>{
          if (res.code !==0){
            return Toast.fail(res.msg)
          }
          state.recordList = res.data
        })
        state.loading = false;
        state.finished = true;
        state.showCalendar = false
      }, 1000);
    }

    const onRefresh = () => {
      // 清空列表数据
      state.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    const changeCalendar=(value) =>{
      state.showCalendar = false
      state.createDate = formatDate(value);
      onLoad();
    }
    const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 00:00:00`;

    return {
      types,
      state,
      onLoad,
      onRefresh,
      changeCalendar
    }
  }
}
</script>

<style scoped>

</style>
